<template>
  <div class="buyFoot acenter">
    <div class="buyIcon lcenter" @click="showSelect">
      <nut-badge :value="buyBtnInfo.count" :max="99">
        <nut-image
          :src="getAssetsFile('home/groupLink/buyCardBottm.png')"
        ></nut-image>
      </nut-badge>
      <p>购物车</p>
    </div>
    <div class="buyBtn" @click="goToPay" v-if="status == 1">
      <nut-image :src="getAssetsFile(buyBtnInfo.img)"></nut-image>
      <p>
        <span>¥{{ buyBtnInfo.price }}</span
        >{{ buyBtnInfo.text }}
      </p>
    </div>
    <div class="buyBtn" v-else-if="status == 0">
      <nut-image :src="getAssetsFile(buyBtnInfo.noImg)"></nut-image>
      <p>
        <span>¥{{ buyBtnInfo.price }}</span
        >{{ buyBtnInfo.text }}
      </p>
    </div>
    <div class="buyBtn" v-else-if="status == -1">
      <nut-image :src="getAssetsFile(buyBtnInfo.img)"></nut-image>
      <div class="startTime ccenter">
        <span>距开始</span>
        <nut-countdown
          :endTime="buyBtnInfo.start_time_stamp * 1000"
          format="DD 天 HH 时 mm 分 ss 秒"
        ></nut-countdown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getAssetsFile } from "@/utils/pub-use";

const props = defineProps<{
  buyBtnInfo: any;
  status?: number;
}>();

const emits = defineEmits(["show", "buy"]);

const showSelect = () => {
  emits("show");
};

const goToPay = () => {
  emits("buy");
};
</script>

<style lang="scss" scoped>
.buyFoot {
  position: fixed;
  bottom: 0;
  z-index: 2022;
  margin-top: 48px;
  height: 112px;
  background: #ffffff;
  padding: 10px 30px 10px 53px;
  width: -webkit-fill-available;
  .buyIcon {
    :deep(.nut-badge__content) {
      top: 3px !important;
      right: 10px !important;
    }
    .nut-image {
      :deep(img) {
        width: 40px;
        height: 36px;
      }
    }
    p {
      margin-top: 8px;
      color: #333333;
      font-size: 22px;
      word-break: keep-all;
    }
  }
  .buyBtn {
    position: relative;
    display: flex;
    justify-content: center;
    margin-left: 60px;
    .nut-image {
      :deep(img) {
        width: 540px;
        height: 106px;
      }
    }
    p {
      margin-top: 22px;
      position: absolute;
      color: #ffffff;
      font-size: 30px;
      font-weight: 500;
      letter-spacing: 2px;
      span {
        margin-right: 13px;
        letter-spacing: 5px;
      }
    }
    .startTime {
      margin-top: 22px;
      position: absolute;
      color: #ffffff;
      font-size: 30px;
      font-weight: 500;
      span {
        margin-right: 5px;
      }
    }
  }
}
</style>
